<template>
  <div style="padding: 10px;">
	  <!-- 搜索区 -->
	  <div style="margin: 10px 0;">
		  <el-input v-model="search" placeholder="输入关键字" style="width: 20%;"/>
		  <el-button type="primary" style="margin-left: 5px;">查询</el-button>
	  </div>
	  <!-- 数据区 -->
    <el-table :data="tableData" height="400px" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" sortable width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
		<el-table-column prop="department" label="部门" width="180" />
        <el-table-column prop="reason" label="原因" />
		<el-table-column fixed="right" label="操作" width="120">
		    <template #default>
		        <el-button link type="primary" @click="handleClick">补签</el-button>
		        <el-popconfirm title="确定要拒绝吗？">
		            <template #reference>
		              <el-button type="text">拒绝</el-button>
		            </template>
		        </el-popconfirm>
		    </template>
		</el-table-column>
    </el-table>
	
	
	<div style="margin: 10px 0;">
		<el-pagination
		      v-model:currentPage="currentPage"
		      v-model:page-size="pageSize4"
		      :page-sizes="[10, 20, 30, 40]"
		      :small="10"
		      :disabled="disabled"
		      :background="background"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total"
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		    />
	</div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
  },
  data(){
	  return {
		  search:'',
		  currentPage:1,
		  total:10,
		  tableData:[
			  {
			      date: '2016-05-03',
			      name: 'Tom',
				  department:'人力部',
			      reason: 'No reason',
			    },
			    {
			      date: '2016-05-02',
			      name: 'Tom',
				  department:'人力部',
			      reason: 'No reason',
			    },
			    {
			      date: '2016-05-04',
			      name: 'Tom',
				  department:'人力部',
			      reason: 'No reason',
			    },
			    {
			      date: '2016-05-01',
			      name: 'Tom',
				  department:'人力部',
			      reason: 'No reason',
			    },
			    {
			      date: '2016-05-08',
			      name: 'Tom',
				  department:'人力部',
			      reason: 'No reason',
			    },
			    {
			      date: '2016-05-06',
			      name: 'Tom',
				  department:'人力部',
			      reason: 'No reason',
			    },
			    {
			      date: '2016-05-07',
			      name: 'Tom',
				  department:'人力部',
			      reason: 'No reason',
			    }
		  ]
	  }
  },
  methods:{
	  handleClick(){
		  
	  },
	  handleSizeChange(){
		  
	  },
	  handleCurrentChange(){
		  
	  }
  }
}
</script>
